<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../../';
        </script>

        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/button.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/infotip.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/radio.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/datepicker.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'>
        </script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.base.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/infotip/ctp.ui.infotip.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/button/ctp.ui.button.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/datepicker/ui.datepicker.js">
        </script> 
        <script type="text/javascript" src="../../js/ctp/datepicker/ctp.ui.datepicker.js">
        </script> 
		<script type='text/javascript' kind='variant'>
            var buttonsGroupbox, showGroupbox;
            var infotip1;
            var panel2;
            var textfield1;
            var button1;
			var combobox1;
			var label1;
			
        </script>
        <script type='text/javascript' kind='event'>
        
        </script>
        <script type='text/javascript' kind='ui'>
            
			$(window).load(function(){            
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: 'button1',
                    width: '100%'
                });
                var textfield1 = new ctp.ui.textfield({
                    id: 'textfield1',
                   width: '100%'
                });
				
                
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: 'button3',
                    width: '100%'
                });
                
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: 'button4',
                    width: '100%'
                });
                
                var  combobox1 = new ctp.ui.combobox({
                    id: 'combobox1',
                    text: 'combobox1',
                    width: '100%'
                });
				
				var datepicker1 = new ctp.ui.datepicker({
					id:'datepicker1',
					width:'100%'
				});
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
						label:{
						    id :label1,
							width:'50px',
							text:'输入框1:'
     					},
                        element: textfield1
                    },{
						label:{
						    id :label1,
							width:'50px',
							text:'日期框1:'
     					},
                        element:datepicker1
					}], [{
                        element: button3
                    }, {
                        element: button4
                    }, {
						label:{
						    id :label1,
							width:'50px',
							text:'选择框1:'
     					},
                        element: combobox1
                    }]]
                
                });
				var button100 = new ctp.ui.button({
					id:'button100',
					text:'button100',
					width:'100%'
				});
                infotip1 = new ctp.ui.infotip({
                    id: 'infotip1',
                    data: {
                        'id1': {
							message:'message1<p>a',
							encodeHTML:true,							
                            target: [button1, textfield1,datepicker1],
							/*css:{'border':'solid 2px blue'},
                            before: function(){
                                alert("before11");
                            },
							after: function(){
								alert("after11");
							}*/
                        },
                       'id2': {
                            message: 'message<p>2',
						//	encodeHTML:true,							
                            target: [button3, button4, combobox1,button100]
							//css:{'border':'solid 2px red'}
                        }
                    },
                    defaults:{
                      //'css':'border:1px solid yellow',
                     },
                    renderTo: 'body'
                });
				
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '隐藏所有提示信息',
                    width: '100%',
                    onClick: function(){
                        infotip1.hideTip();
                    }
                });
                var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '显示所有提示信息',
                    width: '100%',
                    onClick: function(){
                        infotip1.showTip();
                    }
                });
                
                var button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '隐藏提示信息id1',
                    width: '100%',
                    onClick: function(){
                        infotip1.hideTip('id1');
                    }
                });
				
				
                var button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '显示提示信息id1',
                    width: '100%',
                    onClick: function(){
                        infotip1.showTip('id1');
                    }
                });
				
                var button10 = new ctp.ui.button({
                    id: 'button10',
                    text: '将id1的target修改成combobox1',
                    width: '100%',
                    onClick: function(){
                        infotip1.setTarget('id1', [combobox1]);
                        infotip1.setTarget('id2', [button3,button4]);
                    }
                });
               
                
				 var button11 = new ctp.ui.button({
                    id: 'button11',
                    text: '将id1的边框设置成绿色',
                    width: '100%',
                    onClick: function(){
						infotip1.setCss("id1",{'border':'2px solid green'});
                    }
                });
				
                 var button12 = new ctp.ui.button({
                    id: 'button12',
                    text: '将id1的message修改成hello',
                    width: '100%',
                    onClick: function(){
                        console.log("data1");
                        infotip1.setMessage('id1', "hello");
                    }
                });
                var button13 = new ctp.ui.button({
                    id: 'button13',
                    text: '将id1的before设成alert("before")',
                    width: '100%',
                    onClick: function(){
                        infotip1.setBefore('id1', function(){alert("before")});
                    }
                });
				 var button14 = new ctp.ui.button({
                    id: 'button14',
                    text: '将id1的after设成alert("after")',
                    width: '100%',
                    onClick: function(){
                        infotip1.setAfter('id1', function(){alert("after")});
                    }
                });
				
               var showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
						[{element: button6},{element: button7},{element: button8}],
						[{element: button9},{element: button10},{element: button11}],
						[{element: button12},{element:button13},{element: button14}],
						[{element: button100}]
						]
                });
                
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [buttonsLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    width: '100%',
                    title: '功能测试区',
                    items: [showLayout]
                });
                
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'combobox组件',
                    width: '800px',
				   	height:'auto',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
                infotip1.showTip();
            });
        </script>
    </head>
    <body>
    </body>
</html>